<template>
    <div id='main'></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data () {
        return {
  option : {
  // title: {
  //   text: 'Basic Radar Chart'
  // },
  tooltip: {
    trigger: 'item'
  },

  radar: {
    indicator: [
      { name: '停车设施', max: 100 },
      { name: '加油站', max: 100 },
      { name: '卫生间', max: 100 },
      { name: '服务台办理效率', max: 100 },
      { name: '餐饮', max: 100 }
    ],
    // 设置雷达图背景颜色为渐变色
    backgroundColor: {
      type: 'linear',
      x: 0,
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        { offset: 0, color: '#A6FFEB' }, // 0% 处的颜色
        { offset: 0.8, color: '#44D7B6' }, // 80% 处的颜色
        { offset: 1, color: '#44D7B6' } // 100% 处的颜色
      ]
    },
    // 设置内容区域填充背景颜色
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          { offset: 0, color: '#A6FFEB' }, // 0% 处的颜色
          { offset: 0.8, color: '#44D7B6' }, // 80% 处的颜色
          { offset: 1, color: '#44D7B6' } // 100% 处的颜色
        ]
      }
    }
  },
  series: [
    {
      // 雷达图中的各个角的颜色
        itemStyle: {
            color: '#fff', // 设置雷达图中的各个角的颜色
            // borderColor: '#fff', // 设置雷达图中的各个角边框的颜色
            borderWidth: 2 // 设置雷达图中的各个角边框的宽度
        },
      name: '车位信息汇总',
      type: 'radar',
      data: [
        {
          value: [93, 87, 45, 85, 89],
          // 设置数据区域填充背景颜色
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: '#A6FFEB' }, // 0% 处的颜色
                { offset: 0.8, color: '#44D7B6' }, // 80% 处的颜色
                { offset: 1, color: '#44D7B6' } // 100% 处的颜色
              ]
            }
          }
          
        },
    
      ]
    }
  ]
}
        };
    },
    components: {
        
    },
    created() {
        
    },
    mounted() {
        this.initEcharts()
    },
    methods: {
        initEcharts(){
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            this.option && myChart.setOption(this.option);
        }
    },
};
</script>

<style  scoped>
  #main{
    width: 100%;
    height: 100%;
  }
</style>